<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>columns_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
        .water-full .wrapper {
            padding: 50px;
        }



        .water-full .items {
            position: relative;
        }

        .water-full  .item {
            /*定宽*/
            width: 228px;
            /*设置定位方式*/
            position: absolute;
        }

        .water-full.wrapper img {
            display: block;
            width: 100%;
        }

        .water-full.wrapper .item:hover img{
            width: 110%;
            opacity: .7;
            transition:all 1s;
        }
    </style>


</head>
<body>
<div class="wrapper water-full">
    <div class="items" style = "position:relative" >

        <div class="item"  style = "position:absolute top:0 left:0">
            <!--<img ng-src="{{item.src}}" alt="">-->
            <img src = "./images/1.jpg" alt=""/>
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item" style = "position:absolute top:0 left:330px">
            <!--<img ng-src="{{item.src}}" alt="">-->
            <img src = "./images/32.jpg" alt=""/>
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item"  style = "position:absolute top:0 left:660px">
            <!--<img ng-src="{{item.src}}" alt="">-->
            <img src = "./images/34.jpg" alt=""/>
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item" >
            <!--<img ng-src="{{item.src}}" alt="">-->
            <img src = "./images/27.jpg" alt=""/>
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item" >
            <!--<img ng-src="{{item.src}}" alt="">-->
            <img src = "./images/19.jpg" alt=""/>
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item" >
            <!--<img ng-src="{{item.src}}" alt="">-->
            <img src = "./images/15.jpg" alt=""/>
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item" >
            <!--<img ng-src="{{item.src}}" alt="">-->
            <img src = "./images/17.jpg" alt=""/>
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item" >
            <!--<img ng-src="{{item.src}}" alt="">-->
            <img src = "./images/10.jpg" alt=""/>
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item" >
            <!--<img ng-src="{{item.src}}" alt="">-->
            <img src = "./images8.jpg" alt=""/>
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item" >
            <!--<img ng-src="{{item.src}}" alt="">-->
            <img src = "./images/3.jpg" alt=""/>
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item" >
            <!--<img ng-src="{{item.src}}" alt="">-->
            <img src = "./images5.jpg" alt=""/>
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>

    </div>
    <p>正在加载...</p>
</div>
</body>
</html>
			